<template>
	<view class="pt31 border-box column h100 hidden">
		<view class="user-ctn">
			<view class="user">
				<u-avatar src="" size="87rpx"></u-avatar>
				<view class="center-box">
					<view class="title">重庆二手车主黄生</view>
					<view class="phone">15798270982</view>
				</view>
				<view class="tag">2个车源</view>
			</view>
		</view>
		<view class="plr30 bgf pt31 esay-out1 pb5">
			<u-search
				v-model="queryParams.title"
				placeholder="输入你要找的车源"
				placeholderColor="#BDBCBA"
				shape="square"
				height="73rpx"
				:showAction="false"
			></u-search>
		</view>
		<view class="bgf">
			<u-dropdown ref="uDropdownRef">
				<u-dropdown-item v-model="queryParams.sort" :options="optionSort">
					<template #title>
						<view class="justify-start align-center">
							<text class="pr19 fs28">排序</text>
							<view class="pt5">
								<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
							</view>
						</view>
					</template>
				</u-dropdown-item>
				<u-dropdown-item v-model="queryParams.brand" :options="optionSort">
					<template #title>
						<view class="justify-start align-center">
							<text class="pr19 fs28">品牌</text>
							<view class="pt5">
								<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
							</view>
						</view>
					</template>
				</u-dropdown-item>
				<u-dropdown-item v-model="queryParams.price" :options="optionSort">
					<template #title>
						<view class="justify-start align-center">
							<text class="pr19 fs28">价格</text>
							<view class="pt5">
								<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
							</view>
						</view>
					</template>
				</u-dropdown-item>
				<u-dropdown-item v-model="queryParams.filter" :options="optionSort">
					<template #title>
						<view class="justify-start align-center">
							<view class="mr9 fs28">筛选</view>
							<view class="pt10">
								<view class="filter-ic"></view>
							</view>
						</view>
					</template>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- part-筛选内容 -->
		<view class="list-ctn">
			<scroll-view scroll-y class="h100 scrolly">
				<template
					v-for="(item, index) in 4"
					:key="index"
					:refresher-enabled="scrollViewTool.isEnabled"
					:refresher-triggered="scrollViewTool.triggered"
					refresher-background="rgba(0,0,0,0)"
					@refresherrefresh="pullDownRefresh"
					@refresherrestore="scrollViewTool.triggered = false"
					:upper-threshold="100"
					:lower-threshold="100"
					@refresherabort="triggered = false"
					@scrolltolower="reachBottom"
				>
					<view class="good-item">
						<view class="relative">
							<u-image
								:src="`https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/good${index + 1}.jpg`"
								width="220rpx"
								height="164rpx"
								radius="10rpx"
							/>
							<view class="tag">出价领红包</view>
						</view>
						<view class="ml24 flex-1">
							<view class="name">本田 奥德赛2018款 2.4L智享版</view>
							<view class="time">2019年/16万公里</view>
							<view class="price">9.50万</view>
							<view class="bottom">
								<view class="left">
									<view class="point">
										<u-image
											src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/map.png"
											width="18rpx"
											height="23rpx"
										></u-image>
										<view class="text">重庆市</view>
									</view>
									<view class="date">2025.04.10</view>
								</view>
								<view class="right">最高出价</view>
							</view>
						</view>
					</view>
					<u-line margin="30rpx 0" length="696rpx" color="#EDEDED"></u-line>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useLoadPageList } from '@/hooks/useLoadPageList/useLoadPageList.js';
const { listData, listDataDelay, loadStatus, scrollViewTool, reachBottom, pullDownRefresh, reSetList } =
	useLoadPageList();

const queryParams = ref({
	title: ''
});

const optionSort = ref([
	{
		label: '默认排序',
		value: 1
	},
	{
		label: '新车指导价最高',
		value: 2
	},
	{
		label: '新车指导价最高',
		value: 3
	},
	{
		label: '最新发布',
		value: 4
	},
	{
		label: '年龄最短',
		value: 5
	},
	{
		label: '里程最短',
		value: 6
	},
	{
		label: '红包未领完',
		value: 7
	}
]);
</script>

<style scoped lang="scss">
:deep(.u-search__content) {
	border-radius: 20rpx !important;
}

.user-ctn {
	width: 100%;
	padding: 27rpx 54rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	margin-bottom: 25rpx;

	.user {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.center-box {
			margin-left: 26rpx;
			flex: 1;

			.title {
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
			}

			.phone {
				font-weight: 400;
				font-size: 24rpx;
				color: #6c6c6c;
				margin-top: 7rpx;
			}
		}

		.tag {
			min-width: 130rpx;
			height: 58rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #0759bb;
			padding: 0 18rpx;
			line-height: 58rpx;
			text-align: center;
			font-weight: bold;
			font-size: 26rpx;
			color: #0759bb;
		}
	}
}

.list-ctn {
	flex: 1;
	overflow: hidden;
	background-color: #ffffff;
	padding: 26rpx 20rpx;
	box-sizing: border-box;
}

.good-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	.tag {
		position: absolute;
		top: 0;
		left: 0;
		background: #f9de49;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		width: 122rpx;
		height: 35rpx;
		padding: 4rpx 10rpx 3rpx 11rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 20rpx;
		color: #000000;
	}

	.name {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.time {
		font-weight: 400;
		font-size: 24rpx;
		color: #606060;
		margin-top: 6rpx;
		text-align: left;
	}

	.price {
		font-weight: 600;
		font-size: 30rpx;
		color: #d74b34;
		text-align: right;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		.left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #606060;

			.point {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;

				.text {
					margin-left: 6rpx;
				}
			}

			.date {
				font-weight: 400;
				font-size: 24rpx;
				margin-left: 17rpx;
			}
		}

		.right {
			padding-bottom: 3rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #606060;
		}
	}
}
</style>
